<template>
  <div :class="['banner',cname]">
  	<slider v-if="headerBanner" cname="slider" :items="headerBanner"/>
  </div>
</template>

<script>
import Slider from '../../components/core/slider.vue'
export default {
	components: {
    Slider
  },
  props: {
  	headerBanner: {
  		type: Array,
      default() {
        return []
      }
  	},
    cname: {
      type: String,
      default: ''
    }
  },
  data() {
  	return {
  		
		}
  },
  methods: {
  	onSearch(e) {
  		console.log(e)
  	}
  }
}
</script>
<style lang="scss">
@import '../../assets/style/color.scss';
@import '../../assets/style/mixin.scss';
.slider {
  position: relative;
  .swiper-pagination {
    @include right;
    .swiper-pagination-bullet {
      background-color: $color-bg-f;
      opacity: 1;
      transform: scale(.8);
      -moz-transform: scale(.8);
      -webkit-transform: scale(.8);
    }
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
      background-color: $color-text-fa;
      transform: scale(1);
      -moz-transform: scale(1);
      -webkit-transform: scale(1);
    }
  }
  .swiper-wrapper {
    .mark {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 49;
      color: $color-text-f;
      width: 100%;
      span {
        position: relative;
        left: 10px;
        bottom: -2px;
        z-index: 50;
      }
    }
    .mark::after {
      content: ' ';
      display: block;
      height: 12px;
      background-color: rgba(0,0,0,1);
      filter: blur(12px);
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
